<template>
	 <view class="tab-bar1">
	    <view
	      v-for="(item, index) in tabs"
	      :key="index"
	      class="tab-item1"
	      :class="{ active: currentIndex === index }"
	      @click="switchTab(index)"
	    >
	      <text>{{ item.text }}</text>
		  <p class="active-p" :style="{ color: getIndexColor(index) }">{{ item.number }}(单)</p>
	    </view>
		</view>
</template>

<script>
	import {getAppointment,getOrder} from '@/api/appointment.js';
	import {account,getCount} from '@/api/check.js';
	import axios from '@/util/http'
	export default {
		data() {
			return {
				 currentIndex: 0,
				      tabs: [
				        { text: '全部',number: 0 },
				        { text: '已结',number: 0 },
						{ text: '未结',number: 0},
						{ text: '异常',number: 0},
				        // 添加更多 Tab
				      ],
				items: [
					
				],
				count:{},
				type:0,
				req:{
					contactInformation:'',
					beginTime:'',
					endTime:''
				}
			}
		},
		props: {
			 telephone: {
				 type: String,
				 required: true
			 },
			 beginTime: {
			 	type: String,
			 	required: true
			 },
			 endTime: {
			 	type: String,
			 	required: true
			 }
		    },
		methods: {
			switchTab(index) {
			      this.currentIndex = index;
				  //全部
				  if(this.currentIndex===0){
					  this.req.status=0
					  this.req.contactInformation=this.telephone
					  this.req.beginTime=this.beginTime;
					  this.req.endTime=this.endTime;
					  console.log(this.req)
						uni.showLoading({
						        title: '加载中'
						  })
					  account(this.req).then(res =>{
					  	this.items=res.data.data
							uni.hideLoading()
						this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
					  }).catch((error) => {
							uni.hideLoading()
					  });
						uni.showLoading({
						        title: '加载中'
						  })
					  getCount(this.req).then(res=>{
						  this.tabs[0].number=res.data.data.count
						  this.tabs[1].number=res.data.data.accountCount
						  this.tabs[2].number=res.data.data.unaccountCount
						  this.tabs[3].number=res.data.data.abnormalCount
						  this.count.totalMoney=res.data.data.totalMoney
						  this.count.accountMoney=res.data.data.accountMoney
						   this.count.unaccountMoney=res.data.data.unaccountMoney
						   this.count.abnormalMoney=res.data.data.abnormalMoney
						  this.$emit('update:count', this.count);
						  console.log(res)
							uni.hideLoading()
					  }).catch((error) => {
							uni.hideLoading()
					  });
				  }
				  //已结
				  if(this.currentIndex===1){
				  		this.req.status=2
				  		this.req.contactInformation=this.telephone
				  		this.req.beginTime=this.beginTime;
				  		this.req.endTime=this.endTime;
							uni.showLoading({
							        title: '加载中'
							  })
				  		account(this.req).then(res =>{
				  			this.items=res.data.data
				  			this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
								uni.hideLoading()
				  		}).catch((error) => {
								uni.hideLoading()
				  		});
				  }
				  //未结
				  if(this.currentIndex===2){
				  		this.req.status=1
				  		this.req.contactInformation=this.telephone
				  		this.req.beginTime=this.beginTime;
				  		this.req.endTime=this.endTime;
							uni.showLoading({
							        title: '加载中'
							  })
				  		account(this.req).then(res =>{
				  			this.items=res.data.data
				  			this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
								uni.hideLoading()
				  		}).catch((error) => {
								uni.hideLoading()
				  		});
				  }
				  //异常
				  if(this.currentIndex===3){
				  		this.req.status=3
				  		this.req.contactInformation=this.telephone
				  		this.req.beginTime=this.beginTime;
				  		this.req.endTime=this.endTime;
							uni.showLoading({
							        title: '加载中'
							  })
				  		account(this.req).then(res =>{
				  			this.items=res.data.data
				  			this.$emit('update:data', { currentIndex: this.currentIndex,items: [...this.items]  });
								uni.hideLoading()
				  		}).catch((error) => {
								uni.hideLoading()
				  		});
				  }
				
			    },
				getIndexColor(index) {
				      // 根据索引返回颜色
				      if (index === 0) {
				        return '#000000'; // 或者其他颜色
				      } else if (index === 1) {
				        return '#00e600';
				      } else if (index === 2) {
				        return '#0676ff';
				      }
				      // 可以添加更多条件或默认颜色
					  
					  return '#000000'; // 默认颜色
				    },
		}
	}
</script>

<style>
@import "checkTopTabBar.css";
</style>
